<template>
    <div class="container">
        <app-sidebar :router="$router"
                     :config="config"></app-sidebar>
        <div class="main">
            <app-header :routeName="$route.name"
                        :config="config"></app-header>
            <app-content></app-content>
        </div>
    </div>
</template>
<script>
    import Core from 'core/core'

    import AppHeader from './layout/header'
    import AppSidebar from './layout/sidebar'
    import AppContent from './layout/content'

    export default {
        data() {
            return {
                config: {
                    name: '',
                    userName: '',
                    userAvatar: '',
                    type:''
            },
            }
        },
        mounted() {
            let user = Core.Data.getUser()
            if (!user || !user.username) {
                this.$router.push('')
                return
            }

            this.config.userName = user.name ? user.name : user.username
            this.config.type=user.type
        },
        methods: {

        },
        components: {
            AppHeader,
            AppSidebar,
            AppContent
        }
    }
</script>

<style scoped lang="scss">
    .container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: row;
        -webkit-flex-direction: row;
        height: 100%;
        overflow: hidden;

        .main {
            flex: 1;
           display: flex;
            flex-direction: column;



            overflow: hidden;
        }
    }
</style>
